import React from "react";
import { Row, Col, Button, Form, Input, InputNumber, Radio, notification } from 'antd';
import { connect } from 'dva';
import { FormComponentProps } from "antd/lib/form/Form";
import { DropDownSelect } from '@/components/DropDownSelect';
import ImgViewer from '@/components/ImgViewer';
import TextArea from 'antd/lib/input/TextArea';
import Entrance from './formEntrance';
import elec from '@/assets/images/archives/elec.png';
import elecSel from '@/assets/images/archives/elecSel.png';
import paper from '@/assets/images/archives/paper.png';
import paperSel from '@/assets/images/archives/paperSel.png';
import { checkInit } from '@/utils/util';

interface IProps extends FormComponentProps {
  dispatch?: Function;
  children?: React.ReactNode;
  loading?: boolean;
  dict?: any;
  onClick?: Function;
  data: {
    waterPipeQuantity: string;
    poolCapacity: string;
    outdoorFireHydrantQuantity: string;
    isEnable: string;
    waterPipeDiameter: string;
    outdoorNetDiameter: string;
    waterSupplyStatus: string;
    dutyDepartment: string;
    dutyName: string;
    remark: string;
    url: string;
  }
}

@connect(({ archives_devices, loading }) => ({
  outdoors: archives_devices.outdoors || {},
  dict: archives_devices.dict || {},
  loading: loading.effects['archives_devices/queryDevices'],
}))
class Outdoors extends React.PureComponent<IProps, any> {
  state = {
    value: null,
    entrance: null,
    url: '',
  }

  componentDidMount() {
    checkInit();
    this.queryData();
  }

  queryData() {
    const { form, data } = this.props;
    if (data) {
      const {
        isEnable, url,
        ...items
      } = data;
      const ans = {
        ...items
      }
      this.setState({
        value: isEnable,
        url,
      }, () => form.setFieldsValue(ans))
    }
  }

  onChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        values.isEnable = this.state.value;
        dispatch({
          type: 'archives_devices/modifyDevice',
          payload: {
            outdoorItem: [values],
          }
        })
      } else {
        notification['error']({
          message: `保存失败`,
          description: '字段验证不通过',
        });
      }
    })
  }

  render() {
    const { value } = this.state;
    const { form, dict = {} } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    const textAreaLayout = {
      labelCol: { span: 0 },
      wrapperCol: { span: 20 },
    };
    const radioLayout = {
      labelCol: { span: 12 },
      wrapperCol: { span: 12 },
    };
    return (
      <Form style={{ marginTop: '30px' }} onSubmit={this.handleSubmit}>
        <Button type="primary"
          style={{ position: 'absolute', right: '5px', top: '45px' }}
          onClick={() => this.props.onClick()}
        >切换到纸质台账</Button>
        <Row>
          <Col key={1} span={10}>
            <Form.Item
              label="市政给水管数量"
              {...formItemLayout}
            >
              {getFieldDecorator('waterPipeQuantity')(
                <Input type='number' placeholder="请输入" addonAfter="条" />
              )}
            </Form.Item>
          </Col>
          <Col key={2} span={10}>
            <Form.Item
              label="市政给水管管径"
              {...formItemLayout}
            >
              {getFieldDecorator('waterPipeDiameter')(
                <Input type='number' placeholder="请输入" addonAfter="mm" />
              )}
            </Form.Item>
          </Col>
          <Col key={3} span={4} />
        </Row>
        <Row>
          <Col key={1} span={10}>
            <Form.Item
              label="室外水池容量"
              {...formItemLayout}
            >
              {getFieldDecorator('poolCapacity')(
                <Input type='number' placeholder="请输入" addonAfter="m³" />
              )}
            </Form.Item>
          </Col>
          <Col key={2} span={10}>
            <Form.Item
              label="室外环网管径"
              {...formItemLayout}
            >
              {getFieldDecorator('outdoorNetDiameter')(
                <Input type='number' placeholder="请输入" addonAfter="mm" />
              )}
            </Form.Item>
          </Col>
          <Col key={3} span={4} />
        </Row>
        <Row>
          <Col key={1} span={10}>
            <Form.Item
              label="室外消火栓数量"
              {...formItemLayout}
            >
              {getFieldDecorator('outdoorFireHydrantQuantity')(
                <Input type='number' placeholder="请输入" addonAfter="个" />
              )}
            </Form.Item>
          </Col>
          <Col key={2} span={10}>
            <Form.Item
              label="管网供水状态"
              {...formItemLayout}
            >
              {getFieldDecorator('waterSupplyStatus')(
                DropDownSelect(dict, 'fire.outdoor.supply.status')
              )}
            </Form.Item>
          </Col>
          <Col key={3} span={4} />
        </Row>
        <Row>
          <Col key={1} span={10}>
            <Form.Item
              label="可供消防车取水的天然水源情况"
              {...radioLayout}
            >
              <Radio.Group onChange={this.onChange} value={value}>
                <Radio value="1">无</Radio>
                <Radio value="2">有</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col key={2} span={10}>
            <Form.Item
              label="责任部门"
              {...formItemLayout}
            >
              {getFieldDecorator('dutyDepartment')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={3} span={4} />
        </Row>
        <Row>
          <Col key={1} span={6} />
          <Col key={2} span={4}>
            {this.state.value === '2' ? <Form.Item
              label=""
              style={{ marginLeft: '-30%' }}
              {...textAreaLayout}
            >
              {getFieldDecorator('remark')(
                <TextArea title='请描述水源所在位置' rows={4} style={{ width: '300%', marginTop: '-20px' }} placeholder="请描述水源所在位置" />
              )}
            </Form.Item> : null}
          </Col>
          <Col key={3} span={10}>
            <Form.Item
              label="责任人"
              {...formItemLayout}
            >
              {getFieldDecorator('dutyName')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Button style={{ marginLeft: '5%', marginTop: '10%' }} type="primary" htmlType="submit">保存</Button>
      </Form>
    )
  }
}

const Outdoor = Form.create<IProps>()(Outdoors);
export default Outdoor;